<template>
  <Table
    class="rounded-0 tasksItemActivityLog-table mb-3"
    hide-default-footer
    :rounded="false"
    :headers="activityLogHeaders"
    :items="propItems"
  >
    <template #[`item.user`]="{ item }">
      <v-img
        class="rounded-pill"
        width="30"
        height="30"
        :src="item.avatarSrc"
      ></v-img>
      {{ item.user }}
    </template>
    <template #[`item.place`]="{ item }">
      <div>
        {{ item.place }}
      </div>
      <v-icon small color="#79839B">mdi-</v-icon>
    </template>
  </Table>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
@Component({
  components: {
    Table,
  },
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
})
export default class TasksItemActivityLog extends Vue {
  get propItems() {
    return this.$props.items;
  }
  activityLogHeaders = [
    {
      text: "Date",
      value: "date",
    },
    {
      text: "User",
      value: "user",
      width: "100",
    },
    {
      text: "Procedure",
      value: "procedure",
    },
    {
      text: "Place",
      value: "place",
    },
  ];
}
</script>
<style lang="scss">
@import "./TasksItemActivityLog.scss";
</style>
